<script setup lang="ts">
import { h } from "vue";
import { CopyOutlined } from "@ant-design/icons-vue";
import { DrawerProps } from "@/views/home/components/drawer/types.ts";
import HomeSummaryView from "@/views/home/components/summary/index.vue";
import HomeSettingView from "@/views/home/components/setting/index.vue";
import HomeMappingView from "@/views/home/components/mapping/index.vue";
import HomeStatisticsView from "@/views/home/components/statistics/index.vue";
import { message } from "ant-design-vue";
import { useCopyToClipboard } from "@pureadmin/utils";

defineOptions({
	name: "HomeDrawerView",
});

const props = withDefaults(defineProps<DrawerProps>(), {
	index: () => "",
	openDrawer: () => false,
	esIndexInfo: undefined,
});

const index = toRef(props, "index");
const esIndexInfo = toRef(props, "esIndexInfo");
const openDrawer = toRef(props, "openDrawer");
const open = ref<boolean>(false);
const activeKey = ref("1");
const emit = defineEmits(["handleClose", "updateIndexInfo"]);
const { copied, update } = useCopyToClipboard();

watch(openDrawer, () => {
	open.value = openDrawer.value;
});
const afterOpenChange = (bool: boolean) => {
	console.log("open", bool);
};
const handleCopy = () => {
	update(index);
	if (copied.value) {
		message.success("复制成功");
	}
};
function handleClose() {
	emit("handleClose");
	activeKey.value = "1";
}

function updateIndexInfo() {
	emit("updateIndexInfo");
}
</script>

<template>
	<div class="home-drawer-view">
		<a-drawer
			v-model:open="open"
			root-class-name="root-index-info-drawer"
			width="50%"
			placement="right"
			@after-open-change="afterOpenChange"
			@close="handleClose"
			:destroy-on-close="true"
			:body-style="{ paddingTop: 0 }"
		>
			<a-tabs v-model:activeKey="activeKey" :style="{ height: '100%' }">
				<a-tab-pane key="1" tab="总览">
					<home-summary-view :index="index" :es-index-info="esIndexInfo" @update-index-info="updateIndexInfo" />
				</a-tab-pane>
				<a-tab-pane key="2" tab="设置">
					<home-setting-view :index="index" />
				</a-tab-pane>
				<a-tab-pane key="3" tab="映射">
					<home-mapping-view :index="index" />
				</a-tab-pane>
				<a-tab-pane key="4" tab="统计信息">
					<home-statistics-view :index="index" />
				</a-tab-pane>
			</a-tabs>
			<template #title>
				<div class="drawer-title">
					{{ index }}
					<a-button type="text" class="ml-1" size="small" @click="handleCopy" :icon="h(CopyOutlined)" />
				</div>
			</template>
		</a-drawer>
	</div>
</template>

<style scoped lang="scss">
.home-drawer-view {
	width: 100%;
}
.drawer-title {
	width: 100%;
	// 自动换行
	word-wrap: break-word;
	word-break: normal;
}
</style>
